import type {Metadata} from 'next';
import './globals.css';
import ThemeRegistry from '@/components/ThemeRegistry/ThemeRegistry';
import LayoutProvider from '@/components/LayoutProvider';
import Link from 'next/link';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import Divider from '@mui/material/Divider';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import HomeIcon from '@mui/icons-material/Home';
import StarIcon from '@mui/icons-material/Star';
import ChecklistIcon from '@mui/icons-material/Checklist';
import SettingsIcon from '@mui/icons-material/Settings';
import SupportIcon from '@mui/icons-material/Support';
import LogoutIcon from '@mui/icons-material/Logout';
import Header from '@/pages/Header';
import Footer from '@/pages/Footer';

export const metadata: Metadata = {
  title: 'Panzhiyao 的前端宝藏',
  description:
    'Panzhengtao, Lao pan, 老盘的博客, Next React app, SSR, Next.js, 全栈开发',
};

const DRAWER_WIDTH = 240;

const LINKS = [
  {text: 'Home', href: '/', icon: HomeIcon},
  {text: 'About', href: '/about', icon: StarIcon},
  {text: 'Articles', href: '/articles', icon: ChecklistIcon},
];

const PLACEHOLDER_LINKS = [
  {text: 'Settings', icon: SettingsIcon},
  {text: 'Support', icon: SupportIcon},
  {text: 'Logout', icon: LogoutIcon},
];

export default function RootLayout({children}: {children: React.ReactNode}) {
  return (
    <html
      lang="en"
      id="__next"
      // className="dark"
    >
      <body>
        <ThemeRegistry>
          <LayoutProvider>
            <Header />
            <Drawer
              sx={{
                width: DRAWER_WIDTH,
                flexShrink: 0,
                '& .MuiDrawer-paper': {
                  width: DRAWER_WIDTH,
                  boxSizing: 'border-box',
                  top: ['48px', '56px', '64px'],
                  height: 'auto',
                  bottom: 0,
                },
              }}
              variant="permanent"
              anchor="left"
            >
              <Divider />
              <List>
                {LINKS.map(({text, href, icon: Icon}) => (
                  <ListItem key={href} disablePadding>
                    <ListItemButton component={Link} href={href}>
                      <ListItemIcon>
                        <Icon />
                      </ListItemIcon>
                      <ListItemText primary={text} />
                    </ListItemButton>
                  </ListItem>
                ))}
              </List>
              <Divider sx={{mt: 'auto'}} />
              <List>
                {PLACEHOLDER_LINKS.map(({text, icon: Icon}) => (
                  <ListItem key={text} disablePadding>
                    <ListItemButton>
                      <ListItemIcon>
                        <Icon />
                      </ListItemIcon>
                      <ListItemText primary={text} />
                    </ListItemButton>
                  </ListItem>
                ))}
              </List>
            </Drawer>
            <Box
              component="main"
              sx={{
                flexGrow: 1,
                bgcolor: 'background.default',
                ml: `${DRAWER_WIDTH}px`,
                mt: ['48px', '56px', '64px'],
                p: 3,
                display: 'flex',
                flexDirection: 'column',
                minHeight: 'calc(100vh - 64px)',
              }}
            >
              {children}
              <Footer />
            </Box>
          </LayoutProvider>
        </ThemeRegistry>
      </body>
    </html>
  );
}
